<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Login Page | 青年工作室</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="alternate icon" type="image/png" href="/i/favicon.png">
    <!-- 发布 -->
    <script type="text/javascript" src="http://maps.google.cn/maps/api/js?sensor=false&key=AIzaSyAHp5i5mdJDOrOiQC-hgCrIundRm5JgdYI"></script>
    <!--[if (gte IE 9)|!(IE)]><!-->
    <script src="static/js/jquery.min.js"></script>
    <script src="static/map/en/HQMap.min.js"></script>

    <style>
        html, body {
            margin:0;
            padding:0;
            height:100%;
            overflow: hidden;
        }
        .container {
            height:100%;
            width:100%;
            z-index: 0;
        }
    </style>
</head>
<body>
<div id="btn" style="position: fixed;top: 40%;z-index: 99;display: none;">
    <input type="button" value="播放" id="map_moveAlong_start"/>
    <input type="button" value="暂停" id="map_moveAlong_pause"/>
    <input type="button" value="停止" id="map_moveAlong_stop"/>
</div>
<div id="msg" style="height: 40%;position: fixed;z-index: 100;font-size: 10px;">fs</div>
<div id="gmap" class="container"></div>

<script type="text/javascript">
    var map;
    var infoWin;
    var intervalTime;
    var moveLine;
    var count = 0;

    function callbackDemo(text) {
        $('#msg').append(text);
    }
    function callbackDemo2(text) {
        $('#msg').append(text);
    }

    function setMarker(markerOpion) {
//        $('#msg').html(markerOpion);
        markerOpion = JSON.parse(markerOpion);
//        $('#msg').html('----------------------------------------------');
//        $('#msg').append(markerOpion[0].clickInfoWindow.content);

        for(var i = 0; i < markerOpion.length; i++ ) {
            var mo = markerOpion[i];
            //$('#msg').append(mo.position.lng+'，'+ mo.position.lat);
            //$('#msg').append(mo.title+'，'+ mo.label);
            var myLatLng = new HQMap.LngLat(mo.position.lng,mo.position.lat);
            var _isClickShowInfoWin = false;
            var _markerOp = {
                position: myLatLng,
                //map: map,
                title: mo.title,
                label: mo.label
            };
            if(mo.clickInfoWindow) {// 判断拥有点击
                _markerOp.infoWindowContent = mo.clickInfoWindow.content;
                _isClickShowInfoWin = true;
            }
            var marker = new HQMap.Marker(_markerOp);
            marker.setMap(map);
            if(_isClickShowInfoWin){// Marker 点击信息窗体
                marker.addListener('click', function(e) {
                    var _ma = e.target; // Marker 对象
                    var _content = _ma.infoWindowContent;
                    infoWin.close();
                    infoWin.setContent(_content);
                    infoWin.setPosition(new HQMap.LngLat(_ma.position.lng, _ma.position.lat));
                    infoWin.open(map);
                });
            }
        }
    }

    function setLines(linesOption) {
        debugger
        $('#msg').html('|||||||||绘制线路：：：：：');
        //$('#msg').append(linesOption);
        linesOption = JSON.parse(linesOption);
        for(var i = 0; i < linesOption.length; i++){
            var _line = linesOption[i];
            var lnglat = [];
            for(var k = 0; k < _line.path.length; k++){
                lnglat.push([Number(_line.path[k].lng), Number(_line.path[k].lat)]);
            }
            moveLine = drawLine(lnglat);
        }
        if(linesOption && linesOption.length > 0){
            $('#btn').show();
        }
    }

    function drawLine(lineCoordinates){

        // 设置图标
        var lineSymbol = {
            path:google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
            strokeWeight:1.2,
            scale:5,
            rotation:180
        };
        var icon1 = {
            fixedRotation: false,// 图标是否具有相同的固定旋转（默认未false）
            icon: lineSymbol,
            offset: '0%',//从要渲染图标的行的开始处的距离
            repeat: 0//线上连续图标之间的距离
        };

        var mapLine = new HQMap.Polyline({
            path: lineCoordinates,
            icons: [icon1],
            editable: false,
            //map: map
        });
        mapLine.setMap(map);
        return mapLine;
    }

    /**
     * 格式化Flutter传递的参数数据信息
     */
    function formarData(data) {
        data = data.substring(data.indexOf('{'), data.length);
        //$('#msg').html(lnglat);
        data = eval("("+data + ")");
        //$('#msg').html(lnglat.lng+'，'+ lnglat.lat);
        return data;
    }

    function  setCenter(lnglat) {
        $('#msg').html(lnglat);
//        lnglat = formarData(lnglat);
//        $('#msg').append(lnglat.lng+'，'+ lnglat.lat);
////        return false;
//        if(map){
//            setTimeout(function () {
//                if(lnglat){
//                    map.setCenter([lnglat.lng, lnglat.lat]);
//                }
//            });
//        }else {
//            if(lnglat){
//                map.setCenter([lnglat.lng, lnglat.lat]);
//            }
//        }
    }




    function createLine(pathArr) {
        var rs = [];
        if(pathArr && pathArr.length > 0) {
            for(var i=0; i<pathArr.length;i++) {
                rs.push(new HQMap.LngLat(pathArr[i][0], pathArr[i][1]));
            }
        }
        return rs;
    }

    function _initLine () {
        var lineCoordinates = [[108.242152, 33.912865],
            [108.623927, 33.890068],
            [108.796962, 34.079095],
            [109.236415, 34.08137],
            [109.706081, 34.069995],
            [109.604457, 34.308548],
            [110.118068, 34.401513],
            [110.131801, 34.634606]
        ];
        var linePath = createLine(lineCoordinates);
        var lineSymbol = {
            path:google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
            strokeWeight:1.2,
            scale:5,
            rotation:180
        };
        var icon1 = {
            fixedRotation: false,// 图标是否具有相同的固定旋转（默认未false）
            icon: lineSymbol,
            offset: '0%',//从要渲染图标的行的开始处的距离
            repeat: 0//线上连续图标之间的距离
        };
        moveLine = new HQMap.Polyline({
            path: linePath,
            icons: [icon1],
            editable: false,
            map: map
        });
        $('#msg').append("线路准备就绪");
    }

    var _isPause = false;
    function startMoveAlongLine() {
        if(intervalTime){
            clearInterval(intervalTime);
        }
        if(moveLine){
            if(!_isPause) {// 暂停后再次播放无需归位图标
                moveLine.count = 0;// 从头开始播放
            }
            intervalTime = moveLine.moveAuTo();
            var text = "轨迹已开始播放";
            $('#msg').append(text);
        }
    }

    function stopMoveAlongLine() {
        if(moveLine){
            moveLine.count = 0;// 停止后图标复位
            clearInterval(intervalTime);
            var text = "轨迹已停止播放";
            $('#msg').append(text);
        }
    }

    function pauseMoveAlongLine() {
        if(moveLine) {
            clearInterval(intervalTime);
            _isPause = true;
            var text = "轨迹已暂停播放";
            $('#msg').append(text);
        }
    }

    $('#map_moveAlong_start').click(function () {
        debugger
        startMoveAlongLine();
    });

    // 轨迹停止
    $('#map_moveAlong_stop').click(function () {
        debugger
        stopMoveAlongLine();
    });

    // 轨迹暂停播放
    $('#map_moveAlong_pause').click(function () {
        debugger
        pauseMoveAlongLine();
    });



    /**
     * 页面初始化执行
     */
    $(function () {
        var center = $.getUrlParam("center");
        if(!center){
            center = '114.449336,38.084126';
        }
        var lnglat = center.split(',');
        map = new HQMap.CommonMap("gmap", {
            zoom: 10,
            center: new HQMap.LngLat(Number(lnglat[0]),Number(lnglat[1]))
        });

        infoWin = new HQMap.InfoWindow({
            content : '初始化……',
            position : new HQMap.LngLat(Number(lnglat[0]),Number(lnglat[1]))
        });
        infoWin.close();// 关闭信息窗体

        var _html = "[{\"path\":[{\"lng\":116.368904,\"lat\":39.913423},{\"lng\":116.382122,\"lat\":39.901176},{\"lng\":116.387271,\"lat\":39.912501},{\"lng\":116.398258,\"lat\":39.9046}]}]";
        console.log(JSON.parse(_html));

        //setLines(_html);
        //$('#map_moveAlong_start').click();
        //_initLine();

        // 绘制地图中心点
//        var myLatLng = new HQMap.LngLat(116.389676,39.894701);
//        var marker = new HQMap.Marker({
//            position: myLatLng,
//            //map: map,
//            title: '地图中心点',
//            label: '地图中心点',
//            infoWindowContent: 'QQQQQQ'
//        });
//        marker.setMap(map);
//        marker.addListener('click', function(e) {
//            console.log(e);
//            var _ma = e.target; // Marker 对象
//            var _content = _ma.infoWindowContent;
//            infoWin.close();
//            infoWin.setContent(_content);
//            infoWin.setPosition(new HQMap.LngLat(_ma.position.lng, _ma.position.lat));
//            infoWin.open(map);
//        });
//        var marker2 = new HQMap.Marker({
//            position: new HQMap.LngLat(Number(lnglat[0]),Number(lnglat[1])),
//            //map: map,
//            title: '地图中心点2',
//            label: '地图中心点2',
//            infoWindowContent: 'YYYYYY'
//        });
//        marker2.setMap(map);
//        marker2.addListener('click', function(e) {
//            console.log(e);
//            var _ma = e.target; // Marker 对象
//            var _content = _ma.infoWindowContent;
//            infoWin.close();
//            infoWin.setContent(_content);
//            infoWin.setPosition(new HQMap.LngLat(_ma.position.lng, _ma.position.lat));
//            infoWin.open(map);
//        });


        var _isComplete = false;
        google.maps.event.addListener(map._,"tilesloaded",function(event){
            //if(!_isComplete){
            //console.log('触发点击事件');
            var message = {
                "name":"Demo",
                "ID":12,
                "value":"QQ",
                "isFirstComplete":!_isComplete
            };
            //setCenter("LngLat{lat: 39.912321, lng: 116.396663}");
            Toast.postMessage(JSON.stringify(message));
            //}

            _isComplete = true;
        });

    });


    /**
     * 扩展
     */
    (function ($) {
        $.getUrlParam = function (name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]); return null;
        }
    })(jQuery);

</script>

</body>
</html>